Complex graphical user interfaces are used by applications and other software programs in order to facilitate user interaction. In order to be useful, such user interfaces are generally complex and include a variety of features and behaviors.
When such a complex user interface is created, the user interface (UI) is generally created by combining a number of user interface elements. These user interface elements may include elements which display information to a user (e.g. labels, status bars). User interface elements may also include elements which allow the user to control aspects of the UI (e.g. sliders, scrollbars). Some user interface elements may be hybrid elements, combining both display and control functionality (e.g. pulldown menus).
The creation of UI elements is time-intensive. A common and time-tested mechanism for enabling reuse of elements in graphical applications is the specification and use of templates. Those templates can be specified declaratively such as with a markup language. A template is a reusable specification that corresponds to a user interface element and describes, in general, the appearance and functionality of the user interface elements. (Microsoft Corporation's PowerPoint application calls such templates “masters”; Microsoft Corporation's Visio uses the term “stencil.”)
In order to allow customization of a template, the template may be parameterized. The parameters (or “property values”) of a parameterized template can be set independently on each element to which the template is applied in order to customize the element. In this way, flexibility of a re-usable element is enabled through a highly-parameterized template, and the appearance of the template in any particular instance is dictated to some degree by the particular properties set on that instance. For example, where a button template defines the appearance of a button control, the button template may include a property value which can be set to a text string. The property value allows the designer to specify text to display on the button. As a further example, a status bar template may be customized via properties on the template to display certain data to the user (and to include specific font, font color, font size, background color, etc.).
Thus, UI templates can be used to describe the appearance of user interface elements in a reusable and customizable manner and enable a clean separation between the appearance of a UI element and its behavior. As noted above, the appearance of a particular element is typically specified in markup language through one or more sharable templates and through some number of property values specific to that instance.
Templates may be used more than once within a given design. Each use of a template within a design is known as an instance of the template. The user experience when editing a template is a key factor in making effective use of templates. In many applications, any change to a template is automatically reflected in each instance of the template.
In the prior art, in building or editing a UI document within existing UI design tools, a designer can create and edit a packaged piece of artwork called a symbol. A symbol can be reused and each instance of a symbol can be edited. However, symbols are less rich and flexible than control templates as described above. Specifically, symbols do not provide a mechanism for declarative parameterization. While, as mentioned, in existing graphics tools, the user has the ability to edit symbols, differentiating instances requires editing each instance separately, and severing the link to the shared template. This may be sufficient to edit even a complex graphic, however, the limitations on symbols present problems for a UI designer. Because any differentiated instances are no longer related to the original template, subsequent changes to the template will need to be applied separately to each instance, and therefore a UI designer will waste time and effort in attempting to create the UI design they require.
Also, existing tools only allow the designer to edit within the context of a single symbol. Having the ability to edit only one symbol at a time fundamentally prevents editing operations that might span multiple symbols. Thus, for example, when designing the template for a scrollbar, it is often desirable that different arrow indicators are aligned with each other. If each arrow indicator is part of a separate button symbol, then they must be edited separately. There is no way to select the arrow indicators within both symbol instances and perform an alignment. The designer has to manually specify the properties for each element, and ensure that they are the same. Thus no operation which would be useful to apply to sets of arbitrary elements in the UI, within multiple symbols, can be performed. Alignment/positioning, editing of properties, and copying an element's appearance via an eyedropper tool are all simple examples of operations a designer could find useful in creating a control template or symbol. Because multiple symbols can not be edited simultaneously, these types of operations are more difficult.
UI elements are often placed within layout containers. A layout container is a certain type of UI element which specifies how its children should be arranged and sized. Constraints such as minimum and maximum size, space between elements, and how to position additional elements which are generated dynamically are all taken into account at runtime by a layout algorithm which calculates the locations and sizes of all elements in a page or application. As such, a design for a control template containing layout containers may have a different appearance when subjected to different sets of layout constraints. Since the template may be used for a container control, such as a menu or list, the appearance may vary when subjected to different content. The final goal for such a template is often to have a consistent appearance when subjected to a variety of content and constraints. Existing tools, as in the prior art, do not support symbols with content. Editing a template or symbol without instance specific content, as in the prior art, hampers the workflow by removing the direct feedback of seeing the effect of content on changes to the template.
In modern user interface systems, it is possible for a portion of a display page or underlying application to provide values for properties which override the defaults. For example on many web pages, similar regions may have a slightly varying appearance. In the design of such a feature, it is not necessary to provide a different template or symbol for these slight variations in appearance. Properties, such as background color, can be set or overridden for that portion of the document. A properly designed control template will be able to consume these locally set properties or resources. In the design of such a control template, the ability to see the impact of a variety of sets of locally set properties would be useful.
Thus, for the above reasons, among others, there is a need for an improved way to create, edit, and use UI elements which are rich and flexible, while allowing for increased flexibility in editing.